<template>
  <ul>
    <li>
      <router-link to="/fooddetail/9001/yangrouchuan"> 羊肉串 </router-link>
    </li>
    <li>烤腰子</li>
    <li>韭菜</li>
  </ul>
  <hr />
  <p>count is {{ store.count }}</p>
  <p>double count is {{ store.doubleCount }}</p>
  <br />
  <br />
  <!-- {{ homeStore.getMenuList }}
   -->
  <ul>
    <li v-for="item in homeStore.getMenuList">
      <div style="display: flex; flex-direction: column">
        <img :src="item.icon" style="width: 80px; height: 80px" alt="" />
        <span>{{ item.title }}</span>
      </div>
    </li>
  </ul>
</template>

<script setup>
import {
  onBeforeMount,
  onMounted,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated
} from 'vue'
import { useCounterStore } from '../stores/counter'
import { useHomeStore } from '../stores/home'
const store = useCounterStore()
const homeStore = useHomeStore()

// console.log('---store---', store)

// 即将挂在
onBeforeMount(() => {
  console.log('---FoodsList----onBeforeMount---')
})

onMounted(() => {
  console.log('---FoodsList----onMounted---')
})

// 激活
onActivated(() => {
  console.log('---FoodsList----onActivated---')
})

// 失活
onDeactivated(() => {
  console.log('---FoodsList----onDeactivated---')
})

// 卸载之前
onBeforeUnmount(() => {
  console.log('---FoodsList----onBeforeUnmount---')
})

// 卸载之后
onUnmounted(() => {
  console.log('---FoodsList----onUnmounted---')
})
</script>
